<template>
    <!-- 导航部分开始 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>主数据</el-breadcrumb-item>
        <el-breadcrumb-item>车间管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航部分结束 -->

    <!--  搜索栏开始 -->
    <!-- //绑定queryWorkshop[]数组 -->
    <el-form style="margin-top: 15px;" :inline="true" :model="queryWorkshop" class="demo-form-inline">
        <el-form-item label="车间编码">
            <!-- //传入queryWorkshop.workshopName,queryWorkshop.workshopName -->
            <el-input v-model="queryWorkshop.workshopCode" placeholder="请输入车间编码" clearable />
        </el-form-item>
        <el-form-item label="车间名">
            <!-- //传入queryWorkshop.workshopName,queryWorkshop.workshopName -->
            <el-input v-model="queryWorkshop.workshopName" placeholder="请输入车间名称" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="loadWorkshops"><el-icon>
                    <Search />
                </el-icon>搜索</el-button>
            <el-button @click="cleanWorkshops"><el-icon>
                    <Refresh />
                </el-icon>重置</el-button>
        </el-form-item>
    </el-form>
    <!--  搜索栏结束 -->

    <!-- 工具栏开始 -->
    <div class="flex" style="margin-top: 10px;">
        <el-button title="新增车间" @click="this.addWorkshopDialogVisible = true" type="primary">
            <el-icon>
                <Plus />
            </el-icon>
            新增
        </el-button>
        <el-button title="修改选中车间" @click="handlerEdits" type="success">
            <el-icon>
                <EditPen />
            </el-icon>
            修改
        </el-button>
        <el-button title="删除选中车间" @click="deleteWorkshops" type="danger"><el-icon>
                <Delete />
            </el-icon>
            删除
        </el-button>
        <el-button title="导出选中车间" @click="printWorkshops" type=""><el-icon>
                <Download />
            </el-icon>
            导出
        </el-button>
    </div>
    <!-- 工具栏结束 -->

    <!-- 表格 开始 -->
    <el-table ref="workshopTable" :data="workshops" max-height="800px" stripe="true" border="true"
        style="width: 100%;margin-top: 10px;">
        <el-table-column type="selection" width="55" />
        <el-table-column label="车间编码" property="workshopCode" />
        <el-table-column label="车间名称" property="workshopName" />
        <el-table-column label="面积" property="area" />
        <el-table-column label="负责人" property="charge" />
        <el-table-column label="是否启用" property="enableFlag">
            <template #default="scope">
                <!-- scope.row 就是整行数据-->
                <el-tag v-if="scope.row.enableFlag == 'Y'" class="ml-2" type="success">是</el-tag>
                <el-tag v-else class="ml-2" type="danger">否</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="备注" property="remark" />

        <el-table-column width="200px" align="center" label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)"><el-icon>
                        <EditPen />
                    </el-icon>编辑</el-button>
                <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                    title="您是否要删除这行数据">
                    <template #reference>
                        <el-button size="small" type="danger"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!-- 表格 结束 -->
    <!-- 分页栏开始 -->
    <el-pagination style="margin-top: 15px;" :page-size="limit" :pager-count="10" @current-change="changePage" background
        layout="prev, pager, next" :total="total" />
    <!-- 分页栏结束 -->

    <!-- 添加车间的弹窗窗体开始-->
    <el-dialog v-model="addWorkshopDialogVisible" title="添加车间" width="1000" align-center>
        <!-- 添加车间的表单 -->
        <el-form label-width="100px" :model="newWorkshop" style="max-width: 900px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="车间编码">
                        <el-input v-model="newWorkshop.workshopCode" />
                    </el-form-item>
                </el-col>
                <el-form-item label="自动编码">
                    <el-switch v-model="newWorkshop.workshopCode" />
                </el-form-item>
                <el-col :span="8">
                    <el-form-item label="车间名称">
                        <el-input v-model="newWorkshop.workshopName" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="面积">
                        <el-input-number v-model="newWorkshop.area" :min="1" :max="100" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="负责人">
                        <el-input v-model="newWorkshop.charge" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="是否有效">
                        <el-radio-group v-model="newWorkshop.enableFlag">
                            <el-radio label="Y" :value="Y" >是</el-radio>
                            <el-radio label="N" :value="N" >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-form-item label="备注">
                <el-input v-model="newWorkshop.remark" type="textarea" />
            </el-form-item>


        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelAddWorkshop">取消</el-button>
                <el-button type="primary" @click="doAddWorkshop">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加车间的弹窗窗体结束-->

    <!-- 修改车间的弹窗窗体开始-->
    <el-dialog v-model="workshopEditDrawer" title="添加车间" width="1000" align-center>
        <!-- 添加车间的表单 -->
        <el-form label-width="100px" :model="editWorkshop" style="max-width: 900px">

            <el-row>
                <el-col :span="8">
                    <el-form-item label="车间编码">
                        <el-input v-model="editWorkshop.workshopCode" />
                    </el-form-item>
                </el-col>
                <el-form-item label="自动编码">
                    <el-switch v-model="editWorkshop.workshopCode" />
                </el-form-item>
                <el-col :span="8">
                    <el-form-item label="车间名称">
                        <el-input v-model="editWorkshop.workshopName" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="面积">
                        <el-input-number v-model="editWorkshop.area" :min="1" :max="100" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="负责人">
                        <el-input v-model="editWorkshop.charge" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="是否有效">
                        <el-radio-group v-model="editWorkshop.enableFlag">
                            <el-radio label="Y" :value="Y" >是</el-radio>
                            <el-radio label="N" :value="N" >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-form-item label="备注">
                <el-input v-model="editWorkshop.remark" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelEditWorkshop">取消</el-button>
                <el-button type="primary" @click="doWorkshopEdit">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 修改车间的弹窗窗体结束-->
</template>
<script>
import workshopRequest from '../../../aip/md/workshop-api.js';
export default {
    data() {
        return {
            workshops: [],
            // 查询参数
            page: 1,
            limit: 10,
            total: 0,
            maxPageNum: 1,
            queryWorkshop: {},
            newWorkshop: {}, // 新添加的车间对象
            addWorkshopDialogVisible: false,// 弹窗的属性
            workshopEditDrawer: false, // 标记编辑车间的窗体是否显示
            direction: 'rtl',// 抽屉的方向
            editWorkshop: {}, // 当前正在编辑的车间对象 
        }
    }, methods: {
        // 加载车间
        loadWorkshops() {

            console.log(this.queryWorkshop);
            //axios调用
            workshopRequest.list(this.page, this.limit, this.queryWorkshop, data => {
                console.log(data); // 这里的data就是我们的PerRequest对象
                // 取出分页的数据
                let pager = data.data;
                this.workshops = pager.data;//改
                this.total = pager.total;
                this.maxPageNum = pager.maxPageNum;
            });


        },

        /**
        * 分页栏的按钮事件
        * @param {} currPage  最新的页码
        */
        changePage(currPage) {
            this.page = currPage;
            this.loadWorkshops();
        },
        // 重置清空
        cleanWorkshops() {
            this.queryWorkshop = '';
        },
        /**回调函数后,将后端数据传给前端
                 * 添加车间的提交按钮事件
                 */
        doAddWorkshop() {

            // 车间数据 this.newWorkshop
            workshopRequest.saveWorkshop(this.newWorkshop, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '添加车间成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.addWorkshopDialogVisible = false;
                    // 重新加载数据
                    this.loadWorkshops();
                    // 将newWorkshop制空
                    this.newWorkshop = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '车间名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
        * 行编辑按钮事件
        * @param {*} row 整行数据 
        */
        handleEdit(row) {
            // 显示抽屉弹窗
            console.log(this.editWorkshop.enableFlag);
            // 通过id加载要编辑的车间信息
            workshopRequest.get(row.workshopId, res => {
                this.editWorkshop = res.data;
                console.log(this.editWorkshop.enableFlag);
                // 显示抽屉弹窗
                this.workshopEditDrawer = true;
            });
        },
        /**
            * 车间编辑提交按钮事件
            */
        doWorkshopEdit() {
            // 提交editWorkshop即可
            workshopRequest.edit(this.editWorkshop, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑车间成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.workshopEditDrawer = false;
                    // 重新加载数据
                    this.loadWorkshops();
                    // 将editWorkshop制空
                    this.editWorkshop = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '车间名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },

        /**
* 行编辑按钮事件
* @param {*} row 整行数据
*/
        handleDelete(row) {
            workshopRequest.delete(row.workshopId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadWorkshops();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },
        /**
 * 批量编辑按钮事件
 */
        handlerEdits() {
            // 获取表格对象
            let table = this.$refs.workshopTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 获取第一行数据
            let row = selectionRows[0];
            // 调用行编辑事件
            this.handleEdit(row);
        },

                /**
        * 批量删除角色的工具按钮事件
        */
        deleteWorkshops() {
            // 获取表格对象
            let table = this.$refs.workshopTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 生成一个要删除的workshopId的数组
            let workshopIds = [];
            //遍历添加到要删除的数组push
            selectionRows.forEach(workshop => {
                workshopIds.push(workshop.workshopId);
            });

            // 调用API进行删除
            workshopRequest.deleteSelect(workshopIds, res => {
                this.$message({
                    type: "success",
                    message: "成功的删除了" + res.msg + "条数据"
                });
                this.loadWorkshops();
            });
        },







    }, mounted() {
        this.loadWorkshops();
    }
}
</script> 
<style scoped></style>